<template>
  <div class="common-layout">
    <div>
      <div class="title">宠物寄养</div>
      <el-container>
        <el-aside class="pet-image" >
          <!-- 左边显示图片 -->
          <img src="../../assets/jiyang.jpeg" height="320" />
          <img src="../../assets/jyang2.jpg" height="320" />
        </el-aside>
        <el-main>
          <!-- 右边显示文字 -->
          <div class="pet-info">
            <!-- 预约服务 -->
            <div>
              <el-button class="bt" @click="addopen">申请预约寄养服务</el-button>
            </div>
            <p> 因为短期外出无法照顾自己宠物吗？来看我们的服务，保证宠物的心理身体安全健康！</p>
            <h1>当主人由于节假日、出差等原因外出，短期内无法照料或照看自己的宠物</h1>
            <h1 class="a1">这个时候就由我们登场了。</h1>
            <p>宠物给我们寄养时，先签署寄养协议，保证寄养人和看护人员的权益。我们会确保寄养宠物的健康状况</p>
            <p>做到看护人要承担的责任跟义务，例如定时喂餐，定时遛狗，按约定洗澡等。如若寄养过程中，宠物患病或者受伤，细化病种</p>
            <h1>按照合同预定，是由于本宠物店的看护人造成的，本宠物店看护人会以协议内容具体条款赔付</h1>
            <h1 class="a2">快来试试我们的服务吧！</h1>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
   <!-- 新增区域 -->
   <el-dialog v-model="dialogVisible" title="宠物信息" width="30%">
      <el-form label-width="100px" size="small">
        <el-form-item label="用户名称">
          <el-input size="small" v-model="form.username" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户id">
          <el-input size="small" v-model="form.userid" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="预约时间">
          <el-input size="small" v-model="form.sampletime" type="date" autocomplete="off" placeholder="请选择时间"></el-input>
        </el-form-item>
        <el-form-item label="宠物种类">
          <el-select clearable v-model="form.petstypeid" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in petstypeList" :key="item" :label="item.typename" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约备注">
          <el-input v-model="form.sampledesc" type="text" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="寄养开始时间">
          <el-input v-model="form.timestart" type="datetime-local" autocomplete="off" placeholder="选择时间"></el-input>
        </el-form-item>
        <el-form-item label="寄养结束时间">
          <el-input v-model="form.endtime" type="datetime-local" autocomplete="off" placeholder="选择时间"></el-input>
        </el-form-item>
        <!-- <el-form-item label="寄养领走时间">
          <el-input v-model="form.taketime" type="datetime-local" autocomplete="off" placeholder="选择时间"></el-input>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 认</el-button>
        </span>
      </template>
    </el-dialog>
</template>

<script>
    export default{
        name: "SampleView",
      data() {
        return {
          petstypeList: [],
          dialogVisible: false,
          form: {},
        }
      },
      created() {
        this.getpetstypeList();
      },
      methods:{
        //新增寄养框打开方法
        addopen(){
            this.form = {};
            this.dialogVisible =true;
        },
        //修改新增寄养方法
        save() {
          this.$http.post("/sample/", this.form).then((res) => {
            if (res.data.status == 200) {
                this.$message.success("提交成功,等待管理员审批"),
                this.dialogVisible = false;
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        //获取根据id获取寄养种类
        getpetstypeList() {
          this.$http.get("/petstype").then((res) => {
            if (res.data.status == 200) {
              this.petstypeList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          });
        }
      }
    }
</script>

<style>
.pet-image {
  width: 500px;
  height: 700px;
  margin-right: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.common-layout {
  line-height: 50px;
  height: 750px;
  text-align:center;
  width: 90%; 
  margin: auto; /* 水平居中对齐 */
  margin-top: -20px;
  background-color: #cdf0fd39;
}
.title {
  background-color: #cdf0fd39;
  text-align: center;
  font-size: 250%;
  font-weight: 900;
  font-family: "宋体";
  color: #0097ce;
}
.a1 {
  font-size: 60px;
}
.a2 {
  font-size: 35px;
}
.bt{
  width: 250px;
  height: 50px;
  font-size: 25px;
  font-family:  "宋体";
  font-weight: 900;
  background-color: rgb(164, 238, 174);
}
.pet-info{
  font-family: "宋体";
  color: #00506e;
}
</style>